<template>
  <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" style="border-right: 0px;" unique-opened
    :collapse="layout == 'top' ? false : collapsed" :mode="layout == 'top' ? 'horizontal' : 'vertical'">

    <template v-for="(item) in MenuList" :key="item.id">
      <template v-if="item.children && item.children.length > 0">
        <el-sub-menu :index='item.path'>
          <template #title>
            <el-icon v-if="item.meta?.icon">
              <component :is='item.meta?.icon.replace("el-icon-", "")' />
            </el-icon>
            <span>{{ item.name }}</span>
          </template>


          <!-- 二级 -->
          <template v-for="(i) in item.children" :key="i.id">
            <template v-if="i.children && i.children.length > 0">
              <el-sub-menu :index='i.path'>
                <template #title>
                  <el-icon v-if="i.meta?.icon">
                    <component :is='i.meta?.icon.replace("el-icon-", "")' />
                  </el-icon>
                  <span>{{ i.name }}</span>
                </template>
                <el-menu-item :index='s.path' v-for="(s) in i.children">
                  <el-icon v-if="s.meta?.icon">
                    <component :is='s.meta?.icon.replace("el-icon-", "")' />
                  </el-icon>
                  <template #title>
                    <span>{{ s.name }}</span>
                  </template>
                </el-menu-item>
              </el-sub-menu>
            </template>
            <template v-else>
              <el-menu-item :index='i.path'>
                <el-icon v-if="i.meta?.icon">
                  <component :is='i.meta?.icon.replace("el-icon-", "")' />
                </el-icon>
                <template #title>
                  <span>{{ i.name }}</span>
                </template>
              </el-menu-item>
            </template>


          </template>

        </el-sub-menu>
      </template>
      <template v-else>
        <el-menu-item :index='item.path'>
          <el-icon v-if="item.meta?.icon">
            <component :is='item?.meta?.icon.replace("el-icon-", "")' />
          </el-icon>
          <template #title>
            <span>{{ item.name }}</span>
          </template>
        </el-menu-item>
      </template>

    </template>

  </el-menu>

</template>

<script setup lang="ts">
import { PropType } from 'vue';
const props = defineProps({
  MenuList: {
    type: Array as PropType<Parent[]>,
    required: true,
    default: () => []
  },
  collapsed: {
    type: Boolean
  },
  layout: {
    type: String
  }
})

</script>